<template>
  <el-dialog v-model="dialogVisible" append-to-body :title="formType == 'add' ? '新增' : '编辑'" width="540">
    <div class="form-box">
      <el-form v-if="dialogVisible" label-width="100px" :model="formObj" ref="formRef" :rules="rules" size="large">
        <el-form-item label="用户ID" prop="user_id">
          <el-input v-model="formObj.user_id" type="text" autocomplete="off" placeholder="请输入用户ID" />
        </el-form-item>
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="formObj.username" type="text" autocomplete="off" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="分销参数" prop="invite_code">
          <el-input v-model="formObj.invite_code" type="text" autocomplete="off" placeholder="请输入分销参数" />
        </el-form-item>
        <el-form-item label="佣金比例" prop="income_ratio">
          <el-input v-model.number="formObj.income_ratio" type="number" autocomplete="off" placeholder="请输入佣金比例">
            <template #prepend>%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="备注说明" prop="remark">
          <el-input v-model="formObj.remark" type="textarea" autocomplete="off" placeholder="请输入备注说明" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div style="text-align: center">
        <el-button size="large" @click="onClose()">取消</el-button>
        <el-button type="primary" size="large" :disabled="loading" :loading="loading" @click="onSubmit(formRef)">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { distributionSaveuserApi } from '@/api/index';
  import type { FormInstance, FormRules } from 'element-plus';

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const emits = defineEmits<{
    (event: 'confirm'): void;
  }>();

  const loading = ref(false);
  const formRef = ref<FormInstance>();
  const formType = ref('add');
  const formObj = reactive({
    user_id: '',
    username: '',
    invite_code: '',
    income_ratio: '',
    remark: '',
  });

  const dialogVisible = ref(false);

  const rules = reactive<FormRules>({
    user_id: [{ required: true, message: '请输入用户ID', trigger: 'change' }],
    username: [{ required: true, message: '请输入用户名称', trigger: 'change' }],
    invite_code: [{ required: true, message: '请输入分销参数', trigger: 'change' }],
    income_ratio: [{ required: true, message: '请输入佣金比例', trigger: 'change' }],
    // remark: [{ required: true, message: '请输入备注说明', trigger: 'blur' }],
  });

  const onOpen = (data, type) => {
    dialogVisible.value = true;
    formType.value = type;
    if (type == 'add') {
      formObj.user_id = '';
      formObj.username = '';
      formObj.invite_code = '';
      formObj.income_ratio = '';
      formObj.remark = '';
    } else if (type == 'edit') {
      Object.assign(formObj, data);
    }
  };

  const onClose = () => {
    dialogVisible.value = false;
  };

  const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        onSubmitFn();
      }
    });
  };

  const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
  };

  const onSubmitFn = async () => {
    if (loading.value) return false;
    loading.value = true;
    let params = {
      user_id: formObj.user_id,
      username: formObj.username,
      invite_code: formObj.invite_code,
      income_ratio: formObj.income_ratio,
      remark: formObj.remark,
    };
    distributionSaveuserApi(params)
      .then((res) => {
        loading.value = false;
        if (res.errcode == 0) {
          ElMessage.success(res.message || res.errmsg);
          emits('confirm');
          onClose();
        } else {
          ElMessage.error(res.message || res.errmsg);
        }
      })
      .catch((err) => {
        console.log('err', err);
        loading.value = false;
        ElMessage.error(err.message);
      });
  };

  defineExpose({
    onOpen,
  });

  onMounted(() => {});
</script>

<style scoped lang="scss">
  .form-box {
    padding: 10px 20px 0 0;
  }
</style>
